<template>
	<view>
		<view class="details-top">
			<view class="top-inquiry">
				<u-icon name="arrow-left" color="#fff" size="28" @click="fallback"></u-icon>
				<u-search class="product-inquiry" placeholder="搜索店内商品" :animation="true"
					v-model="productInquiry"></u-search>
			</view>
			<view class="top-content">
				<view class="store-introduction">
					<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" class="introduction-image" mode="">
					</image>
					<view class="introduction-name" @click="storeinformation">
						<text>1</text>
						<u-icon name="arrow-right" color="#fff" size="25"></u-icon>
					</view>
				</view>
				<view class="concern">
					<button class="concern-button">
						<u-icon name="plus" color="#fff"></u-icon>
						<text class="button-follow">关注</text>
					</button>
				</view>
			</view>
			<view class="active-items">
				<text>在售商品:1件</text>
				<text>10人进店</text>
			</view>
		</view>
		<view class="details-content">
			<view class="details-left">
				<view class="">
					<view class="all-products">全部商品</view>
				</view>
			</view>
			<view class="details-right">
				<view class="product-category">
					<view v-for="(item,index) in detailsData" :key="index" @click="font(index)">
						<text :class="state == index ? 'font-red' : ''">{{ item.name }}</text>
					</view>
				</view>
				<view class="right-content">
					<view class="content-content">
						<view class="content-box" v-for="(item,index) in recommendData" :key="index">
							<image :src="item.src" class="content-image" mode=""></image>
							<view class="content-name">{{ item.name}}</view>
							<view class="content-font">
								<text class="font-laft">￥{{ item.discount }}</text>
								<text class="font-right">￥{{ item.original }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品查询
				productInquiry: '',
				// 商品分类数据
				detailsData: [{
						name: '综合'
					},
					{
						name: '价格'
					},
					{
						name: '销量'
					},
				],
				// 分类点击样式状态值
				state: '0',
				// 商品数据
				recommendData:[
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png',name:'测试测试',discount:'20', original:'34' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png',name:'测试测试',discount:'20', original:'34' },
					{ src:'https://cdn.uviewui.com/uview/swiper/swiper2.png',name:'测试测试',discount:'20', original:'34' }
				]
			}
		},
		methods: {
			// 回退上一个页面
			fallback() {
				uni.navigateTo({
					url: '/pages/index/productDetails/productDetails'
				})
			},
			font(index) {
				this.state = index
			},
			// 跳转店铺信息页面
			storeinformation(){
				uni.navigateTo({
					url:'/pages/index/storeInformation/storeInformation'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details-top {
		background-color: rgb(154, 59, 225);
	}

	.top-inquiry {
		display: flex;
		align-items: center;
		padding: 10rpx 100rpx 20rpx 20rpx;
	}

	.top-content {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx 20rpx 20rpx;
		align-items: center;
	}

	.store-introduction {
		display: flex;
		align-items: center;
	}

	.introduction-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	.introduction-name {
		margin-left: 20rpx;
		color: white;
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.concern-button {
		height: 60rpx;
		color: #fff;
		background-color: rgb(255, 50, 71);
		display: flex;
		align-items: center;
		border-radius: 40rpx;
	}

	.button-follow {
		margin-left: 10rpx;
	}

	.active-items {
		padding: 0rpx 20rpx 20rpx 140rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.details-content {
		display: flex;
		background-color: rgb(246, 246, 246);
	}

	.details-left {
		width: 16%;
	}
	
	.all-products{
		color: red;
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 20rpx;
		border-left: 1px solid red;
		margin-left: 5rpx;
		background-color: #fff;
	}

	.details-right {
		width: 90%;
	}

	.product-category {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 60rpx 40rpx 60rpx;
		background-color: #fff;
	}
	
	.right-content{
		background-color: #fff;
	}

	.font-red {
		color: red;
	}
	
	.content-content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.content-box{
		width: 49%;
		background-color: #fff;
		margin-bottom: 40rpx;
	}
	.content-image{
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
	}
	
	.content-name{
		font-size: 40rpx;
	}
	
	.content-font{
		margin-top: 40rpx;
	}
	
	.font-laft{
		font-size: 35rpx;
		color: red;
	}
	
	.font-right{
		
		text-decoration: line-through;
		color: #ccc;
	}
</style>